import { Card } from 'antd'
import ReactECharts from 'echarts-for-react'
import './index.scss'

const TrendChart = ({ title, data }) => {
  const option = {
    color: ['#1890ff'],
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        return params[0].name + '<br/>' + params[0].marker + '阅读量: ' + params[0].value.toLocaleString()
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      boundaryGap: false,
      axisLabel: {
        color: '#8c8c8c',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#f0f0f0'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#8c8c8c',
        fontSize: 12,
        formatter: (v) => `${(v / 1000).toFixed(1)}k`
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    series: [{
      type: 'line',
      smooth: true,
      data: data,
      lineStyle: {
        width: 3,
        color: '#1890ff'
      },
      itemStyle: {
        color: '#1890ff',
        borderColor: '#fff',
        borderWidth: 2
      },
      symbol: 'circle',
      symbolSize: 8,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
            { offset: 0.5, color: 'rgba(230, 247, 255, 0.3)' },
            { offset: 1, color: 'rgba(255, 255, 255, 0.3)' }
          ]
        }
      }
    }]
  }

  return (
    <Card title={title} className="trend-chart-card" extra={<a href="#more">查看更多</a>}>
      <ReactECharts option={option} style={{ height: '300px' }} />
    </Card>
  )
}

export default TrendChart
